jQuery窗口调整大小

最新推荐文章于 2024-04-08 19:16:32 发布

cunchi4221

最新推荐文章于 2024-04-08 19:16:32 发布

阅读量2.2k

点赞数 1

文章标签： js jquery python javascript css ViewUI

原文链接：https://www.journaldev.com/4970/jquery-window-resize

版权

jQuery resize() function triggers when the browser window is resized. jQuery resize function attaches a handler, which executes when the resize event is fired.

调整浏览器窗口大小时，jQuery resize（）函数将触发。 jQuery resize函数附加一个处理程序，该处理程序在触发resize事件时执行。

jQuery调整大小 (jQuery resize)

The syntax for using jQuery resize():

使用jQuery resize（）的语法：

resize()
resize（）

This signature is used without any arguments. This function is shortcut for .trigger( "resize" ) function.

该签名不带任何参数。该函数是.trigger( "resize" )函数的快捷方式。

resize(handler)
调整大小（处理程序）

The handler is a function, which is executed when the browser window is resized.

handler是一个函数，当调整浏览器窗口的大小时执行。

resize(eventData, handler)
调整大小（eventData，处理程序）

eventData is the object that will be passed to the event handler.

eventData是将传递给事件处理程序的对象。

jQuery resize method is a shortcut for .on('resize', handler) in the second and third variations.

jQuery resize方法是第二和第三种变体中.on('resize', handler)的快捷方式。

jQuery窗口调整大小 (jQuery window resize)

Following example demonstrates jQuery window resize event.

下面的示例演示jQuery窗口调整大小事件。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Resize</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
p {
color: green;
}
div {
width: 80px;
height: 80px;
float: left;
padding: 10px;
margin: 10px;
background-color: yellow;
}
</style>
<script>
var x=0;
$(document).ready(function(){
  $(window).resize(function(){
    $("span").text(x++);
  });
});
</script>
</head>
<body>

<p>Change your window size</p>
<div>Resized <b> <span>0</span></b> times.</div>

</body>
</html>

In this example, you can see that the jQuery resize() function is triggered when you change the size of the browser window.

在此示例中，您可以看到更改浏览器窗口的大小时触发了jQuery resize（）函数。

The handler attached to the resize() method executes and you can see the count of this event displayed in the <div> element.

附加到resize（）方法的处理程序将执行，您可以在<div>元素中看到此事件的计数。

Note that resize() method will not execute if your HTML page is embedded using iframe, since you are changing the main window size not the iframe size. You can see it in action by visiting below demo page.

请注意，如果您HTML页面是使用iframe嵌入的，则resize（）方法将不会执行，因为您是在更改主窗口的大小，而不是iframe的大小。您可以通过访问下面的演示页面来查看它的运行情况。